//找到图片
let image = $('#image');

//设置配置项
let option = {
    aspectRatio: 1, //纵横比
    //指定预览区域
    preview: '.img-preview' //有大小两个预览区域所以用同类名操作
};
//调用cropper方法 创建裁剪区
image.cropper(option);


//文件域发生改变触发事件
$('button:contains("上传")').on('click', function() {

    $('#file').trigger('click');

});

//更换图片
$('body').on('change', '#file', function() {
    // 获取当前文件域
    let files = this.files;
    if (this.files.length > 0) {
        let file = files[0]
        let url = URL.createObjectURL(file)
        console.log(url);
        //先摧毁裁剪框 更换图片地址， 再生成裁剪框
        image.cropper('destroy').attr('src', url).cropper(option);
    }


})

//点击确定，完成裁剪
$('button:contains("确定")').on('click', function() {
    //裁剪图片
    let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 })
        //接口要求canvas转换成base64格式的字符串
    let base64 = canvas.toDataURL('image/jpeg', 0.3);
    console.log(base64);

    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: {
            avatar: base64
        },
        success: function(res) {
            layer.msg(res.message)
                // console.log(res);
                //头像更换完成，重新渲染index界面
            window.parent.getuserinfo();
        }
    })

})